<!DOCTYPE>
<html>
<head>
	<meta http-equiv='Content-Type' content="text/html" charset='utf-8'/>
	<style type="text/css">
	div{
		resize:both;
		overflow: auto;/*resize必须与overflow一起使用*/
		border:1px dotted #ccccff;
		height:400px;
		width:80%;
	}
	img{
		/*transform:translate(100px,100px);*/
		/*transform:rotate(8deg);*/
		opacity:0.1;
		transition:width 4s;
	}
	img:hover{
		width :800px;
	}
	</style>
</head>
<body>
<div>
	<img src="girl/src/girl.jpg" alt="Peach Blossom"  heigth="500px" width="500px" />
	<p><b>注释：</b>在 IE 中，必须添加 <!DOCTYPE>，这样才能将 :hover 选择器用于除了 <a> 之外的其它元素。</p>
</div>
</body>
   <script type="text/javascript">
   var img = document.getElementsByTagName("img")[0];
   img.onmousemove = function(e){
   	 var e = e || window.event;
   	 var x = e.pageX;
   	 var y = e.pageY;
     this.style['opacity'] = x/600;
   }

   Array.prototype.each = function(callback){
   	   var object = this;
       if(Array.isArray(object)){
       	  var len = object.length;
       	  for(var i = 0;i<len;i++)
       	  {
       	  	 //console.log(object[i]);
       	  	 //callback.call(null,object[i],i);
       	  	 callback.call(null,object[i],i);///第一个参数是对象，后面的参数才是函数要接受的，从第二个开始
       	  	 //callback.call(5,5);
       	  }	 
       }
   }
   var b = [1,2,3,5];
   b.each(function(item,index){
   	 console.log(item+"  "+index);
   })
   
   
</script>
</html>
